<template>
	<view class="good">

		<u--image class="image" :src="good.pictures[0]" width="100%" radius="12" :draggable="false"></u--image>

		<view class="good-footer pb_sm">
			<view class="title">
				{{good.description}}
			</view>
			<view class="price h3 align-items_center">
				<small class="dollar">¥</small>{{good.price}}<small class="unit" v-if="good.unit">/{{good.unit}}</small>
			</view>
			<view class="align-items_center">
				<u--image shape="circle" width="1.2rem" height="1.2rem" :src="good.avatar" />
				<p class="username px_xs">{{good.username}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Good',
		props: {
			good: {
				type: Object,
				required: true,
				default: () => ({})
			}
			// id: Number,
			// username: String,
			// avatar: String,
			// description: String,
			// price: Number,
			// unit: String,
			// pictures: {
			// 	type: Array,
			// 	default: [],
			// },
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/variables.scss';

	.good {
		// background: #fff;
		border-radius: map-get($radii, default);

		.image {
			/deep/ .u-image__image {
				// border-top-right-radius: map-get($radii, default) !important;
				// border-top-left-radius: map-get($radii, default) !important;

				border-radius: map-get($radii, default) !important;

				max-height: calc(100vw/2);
				min-height: calc(100vw/2);
			}
		}

		.title {
			display: -webkit-box;
			/* 设置为WebKit内核的弹性盒子模型 */
			-webkit-box-orient: vertical;
			/* 垂直排列 */
			-webkit-line-clamp: 2;
			/* 限制显示两行 */
			overflow: hidden;
			/* 隐藏超出范围的内容 */
			text-overflow: ellipsis;
			/* 使用省略号 */
			color: #444447;
			font-weight: bold;
			padding: 4px 0;
			line-height: 1.6;
		}

		.price {
			font-weight: bold;
			color: #f65258;

			.dollar {
				font-size: 12px;
			}

			.unit {
				font-size: 14px;
			}
		}

		.username {
			color: #c0c0b9;
		}

		.good-footer {
			// margin-top: 4px;
		}
	}
</style>